<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础测试1</title>
    <style>

        body {
            width: 50vw;
            margin: auto;
        }

        .div-container {
            position: relative;
            border-radius: 6px;
        }

        .code-div {
            position: relative;
            z-index: 1;
            background-color: gray;
            border-radius: 8px;
            padding: 0;
            overflow: visible;
        }

        code {
            overflow-x: auto !important;
            font-size: 14px;
            font-family: "Courier New", Courier, monospace;
            display: block;
            white-space: pre;
            margin: 0;
            font-weight: bold;
        }

        pre {
            background-color: #f3f3f3;
            padding: 10px;
            line-height: 1.2;
            margin: 0;
            border-radius: 6px;
        }

        .copy-div {
            z-index: 2000;
            position: absolute;
            top: 0;
            right: 0;
            transform: translate(50%, -50%);
            visibility: hidden;
            opacity: 0;
            transition: visibility 0s, opacity 0.3s ease-in-out;
        }

        .copy-button {
            /* Add any additional button styles if needed */
        }

        .code-div:hover .copy-div {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>
<body>
<div class="div-container" data-code-id="code2">
    <div class="copy-div" id="copyBtn2" style="display: none;">
        <button class="btn btn-sm btn-success copy-button" type="button" onclick="copyData(this)">复 制</button>
    </div>
    <div class="code-div">
        <pre><code class="language-json">jjlfsd
            中
            撒旦发生纠纷了
            撒旦发射点发射点f</code></pre>
    </div>
</div>
</body>
</html>